<template>
	<view>
		<!-- 导航栏 -->
		<view class="nav" style="position: fixed;top: 0;background-color: #fFFFFF;width: 100%;z-index: 99;">
			<view class="flex"
				style="padding:0 30rpx;margin: 30rpx 0;flex-wrap:wrap;border-bottom: 1rpx solid rgba(30,30,30,0.1);">
				<view style="margin-right: 74rpx;position: relative;" v-for="(item,index) in typeList" :key="index">
					<view class="flex type" :class="typeTindex==index ? 'typeStyle' :''"
						@tap="switchTab(index,item.id)">
						{{item.name}}
					</view>
					<image v-if="typeTindex==index" class="img" src="/static/find/nav.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 二级导航栏 -->
		<view style="position: fixed;top: 240rpx;background-color: #fFFFFF;width: 100%;z-index: 99;">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
				<view class="flex align-center" style="margin: 30rpx;">
					<view class="flex align-center" style="margin-right: 74rpx;" v-for="(item,index) in navList"
						:key="index">
						<view class="flex navType align-center" :class="navTindex==index ? 'typeStyle' :''"
							@click="navChild(index,item.id)" v-if="index<10">
							{{item.name}}
						</view>
						<view v-if="navList.length>11" style="position: fixed;right: 0rpx;padding-top: 10rpx;">
							<image @click.stop="more(3)" style="width: 112rpx;height: 84rpx;"
								src="/static/find/more.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 瀑布流 -->
		<helang-waterfall-list :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset"
			@click="onClick" @done="onDone" style="margin-top: 360rpx;background-color: #fFFFFF;">
			<template>
				<view v-if="waterfall.status == 'await'">
					<view class="load-txt">上拉加载更多</view>
				</view>
				<view v-else-if="waterfall.status == 'loading'">
					<view class="load-txt">加载中</view>
				</view>
				<view v-else-if="waterfall.status == 'success'">
					<view class="load-txt">加载中</view>
				</view>
				<view v-else-if="waterfall.status == 'finish'">
					<view class="load-txt">没有更多了</view>
				</view>
				<view v-else-if="waterfall.status == 'fail'">
					<image class="load-icon" src="/uni_modules/helang-waterfall/static/waterfall/fail.png"></image>
					<view class="load-txt">出错了，请刷新重试</view>
				</view>
				<view v-else-if="waterfall.status == 'empty'">
					<image class="load-icon" src="/uni_modules/helang-waterfall/static/waterfall/empty.png"></image>
					<view class="load-txt">暂无数据</view>
				</view>
				<view v-else>
					<!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG -->
				</view>
			</template>
		</helang-waterfall-list>
	</view>
</template>

<script>
	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
	// 列表接口模拟数据
	import mockData from '@/uni_modules/helang-waterfall/mock-data/waterfall-list.js'
	export default {
		components: {
			"helang-waterfall-list": helangWaterfallList
		},
		data() {
			return {
				typeTindex: 0,
				typeList: [{
						name: '选工厂',
						id: 0
					},
					{
						name: '选设计',
						id: 1
					}, {
						name: '选安装',
						id: 2
					}
				],
				navTindex: 0,
				navList: [],
				// 异步请求相关
				ajax: {
					// 是否可以加载
					load: true,
					// 每页的请求条件
					rows: 10,
					// 页码
					page: 1,
					// 数据列表
					dataList: []
				},
				// 瀑布流组件相关
				waterfall: {
					status: "",
					reset: false,
					list: []
				},
				Id: ''
			}
		},
		onLoad(e) {
			this.getList();
		},
		onReady() {
			this.getNav(1, 10)
			this.getList();
		},
		// 触底触发
		onReachBottom() {
			this.getList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getNav(1, 10)
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(() => {
				this.ajax.page = 1;
				this.ajax.load = true;
				this.getList(this.Id);
			}, 800);
		},
		methods: {
			// 更多
			more(index) {
				this.$tools.goPageNoAuth('/pages/index/seek?index=' + index)
			},
			// 导航栏
			switchTab(e, i) {
				this.typeTindex = e
				switch (i) {
					case 0:
						this.$tools.goPage('/clientEnd/page/factor/AGoodThing')
						break;
					case 1:
						this.$tools.goPage('/clientEnd/page/design/searchForDesign')
						break;
					case 2:
						this.$tools.goPage('/clientEnd/page/installationMaster/installIndex')
						break;
					default:
						break;
				}
			},
			// 二级导航
			getNav(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.navList(data).then((res) => {
					this.navList = res.data.result.list
					console.log('导航栏', this.navList)
				})
			},
			// 二级导航栏
			navChild(e, id) {
				this.navTindex = e
				if (this.navTindex != 0) {
					this.Id = id
				} else {
					this.Id = ''
				}
				console.log('sss', this.Id)
				this.ajax.page = 1;
				this.ajax.load = true;
				this.getList();
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			// 瀑布流组件点击事件
			onClick(data, index, tag) {
				console.log(data);
				this.$tools.goPageNoAuth('/clientEnd/page/decoration/homepageDetails?data=' + JSON.stringify(data))
			},
			// 瀑布流组件渲染完成
			onDone() {
				// 设置组件为 非重置，这行代码保留不删即可
				this.waterfall.reset = false;
				// 恢复 getList 方法的调用
				this.ajax.load = true;
				this.ajax.page++;
				// 设置组件状态为 等待加载
				this.waterfall.status = 'await';
				// if (this.ajax.dataCount >= this.ajax.rows) {
				// 	this.ajax.load = true;
				// 	this.ajax.page++;
				// }
			},
			// 获取数据
			getList() {
				if (!this.ajax.load) {
					return;
				}
				this.ajax.load = false;

				// 设置状态为加载中
				this.waterfall.status = 'loading';
				let data = {
					pageNo: this.ajax.page,
					pageSize: this.ajax.rows,
					id: this.Id
				}
				console.log('data', this.Id)
				this.$api.notes(data).then((res) => {
					console.log('所得到的', res)
					// 第一页数据执行以下代码
					if (this.ajax.page == 1) {
						// 关闭下拉
						uni.stopPullDownRefresh();
						// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
						this.waterfall.reset = true;
					}
					// 数据无效时处理
					if (res.data.result.pageResult.total < 1 || res.data.result.pageResult.list.length < 1) {
						// 设置组件为 加载结束 状态
						this.waterfall.status = 'finish';
						return;
					}
					// 将数据赋值给瀑布流 list 属性
					this.waterfall.list = res.data.result.pageResult.list;
					// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
					this.waterfall.status = 'success';
				})
			}
		},
	}
</script>

<style scoped>
	.load-txt {
		text-align: center;
		padding-bottom: 30rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin-left: 0;
	}

	.nav {
		padding-top: 100rpx;
	}

	.typeStyle {
		color: #1E1E1E !important;
		font-size: 40rpx !important;
	}

	.navType {
		font-size: 36rpx;
		max-width: 152rpx;
		height: 70rpx;
		color: #1E1E1E;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: rgba(30, 30, 30, 0.3);
		text-align: center;
		line-height: 58rpx;
	}

	.type {
		width: 120rpx;
		height: 58rpx;
		font-size: 36rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: rgba(30, 30, 30, 0.3);
		text-align: center;
		line-height: 58rpx;
		margin-bottom: 30rpx;
	}

	.img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: 25rpx;
		transform: translate(-50%, -50%);
	}
</style>
